<template>
       <div>

     <el-table :data="tableData" style="width: 100%" height="100%" @cell-click="onclick"  :header-cell-class-name="mensass"  :span-method="objectSpanMethod"  :cell-style="tableRowStyle">
    <el-table-column :prop="item.prop" :label="item.label"  v-for="(item,index) in propData" :key="index">
        <el-table-column :prop="item1.prop"  v-if="item.arrs.length>0" v-for="(item1,index1) in item.arrs" :key="index1" />
    </el-table-column>
            <template #append>
             <div class="table-append">
                 <el-button size="small"  v-if="pageSizebtn>pageNum && logding" type="primary" :loading="true">正在加载</el-button>
                 <el-button size="small" v-if="pageSizebtn>pageNum&& !logding" @click="getData" type="primary">点击加载更多</el-button>
                 <span v-if="pageSizebtn <=pageNum">暂无更多数据</span>
            </div>
            </template>
            </el-table>
        </div>
</template>

<script>
export default {
  props:{
    tableData:{
      type:Array,
      default: ()=>{}
    },
      pageSize:{
      type:[Number,Object],
      default: 0,
    },
      pageNum:{
      type:[Number,Object],
      default: 0,
      },
     logdingB:{
      type:Boolean,
      default: false,
    },propData:{
      type:Array,
      default: ()=>{}
    }
  },
         data(){
             return{
                 headerStyle:{
                     'background':'#F3F3F3'
                 },
                 pageNumbtn:this.pageNum,
                 pageSizebtn:this.pageSize,
                 logding:this.logdingB,
             }
         },
   watch: {
    pageSize(val){
     
      // this.watchName = val;
       this.pageSizebtn =val
        console.log(val)
      },

      pageNum:{
        immediate:true,
        handler(val){
            
            this.pageNumbtn =val
            console.log(val)
        }
      // this.watchName = val;
      },
      logdingB(val) {
      console.log(val)
      this.logding = val;
      }
  },
  mounted(){
      setTimeout(()=>{
        console.log(this.tableData)
      })
  },
         methods:{
           getData(){
             this.logding = true
             this.$emit('getdata')
           },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 4 === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      tableRowStyle({row, column, rowIndex, columnIndex}){
              console.log(row,rowIndex,columnIndex,column)
                // let style = {}
        if(row.name == "活动次数（场）" && columnIndex == 1){
            // console.log(555555)
            let style = {}
             style.color = 'var(--el-color-primary)'
            return style
        }
        
      },
            mensass({row, rowIndex }){
        //    console.log(row,rowIndex)
           if(rowIndex > 0  ){
              return 'conceal'
           }else{
               return 'header-row'
           }
      },
            onclick(row, column, cell, event){
             console.log(row, column, cell, event)
      }
         }
}
</script>

<style scoped>
/deep/.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#FDF6EE !important;
  height: 3rem;
}
/deep/.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 1.25rem;
font-weight: 400;
color: var(--el-color-text-3);
}
/deep/.cell-row{
    height: 3rem;
}
/deep/.cell-row .cell{

      text-align: center;
    font-size: 1.25rem;
font-weight: 400;
color: var(--el-color-text-3);
/* line-height: 22rem; */
}
 /deep/ .el-table .success-row{
    /* color:var(--el-color-primary); */
}
/deep/ .conceal {
    display: none;
}
 /deep/ .el-table .success-row .el-table_1_column_1_column_3 .cell{
    color:var(--el-color-primary) !important;
}




</style>